import { useState, useRef } from 'react';
import { NavLink } from 'react-router-dom';
import { Breadcrumb, Button , message } from 'antd';
import {
  PageContainer,
  ProFormText,
} from "@ant-design/pro-components";
import { ModalConfirm, TableLayout } from "@/components";
import ItemOption from './ItemOption'
import { userList , userRemove} from "@/services/userMsg";

const DeviceList = () => {
  const tableLayoutRef = useRef<any>(null);
  const [modItem, setModItem] = useState<any>({});
  const modalConfirmRef = useRef<any>(null);
  const itemOptionRef = useRef<any>(null);
  const [paginationTotal, setPaginationTotal] = useState(0);

  const getTableData = async (params?: any) => {
    const res = await userList(params);
    if (res?.code === 200) {
      setPaginationTotal(res.total);
      return res.rows
    }
    return [];
  };
  const columns: any = [
    // 搜索
    {
      dataIndex: "userName",
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormText
            label="用户名称"
            placeholder="用户名称"
            fieldProps={{
              maxLength: 200,
            }}
          />
        );
      },
    },
    {
      dataIndex: "nickName",
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormText
            label="用户昵称"
            placeholder="用户昵称"
            fieldProps={{
              maxLength: 200,
            }}
          />
        );
      },
    },
    {
      dataIndex: "phonenumber",
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormText
            label="手机号"
            placeholder="手机号"
            fieldProps={{
              maxLength: 20,
            }}
          />
        );
      },
    },
    // 表格
    {
      title: "名称",
      dataIndex: "userName",
      hideInSearch: true,
    },
    {
      title: "性别",
      dataIndex: "sex",
      hideInSearch: true,
      render: (_: any, record: any) => (
        <div>
          {record.sex == 1 ? "男" : record.sex == 2 ? "女" : '-'}
        </div>
      ),
    },
    {
      title: "昵称",
      dataIndex: "nickName",
      hideInSearch: true,
    },
    {
      title: "手机号",
      dataIndex: "phonenumber",
      hideInSearch: true,
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      hideInSearch: true,
    },
    {
      title: "操作",
      valueType: "option",
      key: "option",
      width: 180,
      fixed: "right",
      render: (_: any, record: any) => (
        <div className="custom-table-option">
          <a onClick={() => handleOption(record, "edit")}>修改</a>
          <a
            className="danger"
            onClick={() => handleOption(record, "delete")}
          >
            删除
          </a>
        </div>
      ),
    },
  ];
  // 删除操作
  const handleDelete = async () => {
    const res = await userRemove({
      id: modItem?.userId || 0,
    });
    if (res?.code === 200) {
      message.success("操作成功");
      modalConfirmRef?.current?.handleModalShow();
      refreshList();
    }
  };
  // 操作栏操作
  const handleOption = (row: any, key: string) => {
    setModItem({
      ...row,
      modKey: key,
    });
    if (key === "delete") {
      modalConfirmRef?.current?.handleModalShow("是否删除该用户?");
    }else if(key === "edit"){
      itemOptionRef?.current?.handleModalShow(row);
    }
  };
  const modalSuccessCallback = () => {
    if (modItem.modKey === "delete") {
      handleDelete();
    }
  };
  const refreshList = () => {
    tableLayoutRef?.current?.tableReload();
  };

  return (
    <PageContainer
      header={{
        title: <></>,
        ghost: true,
        breadcrumbRender: (route: any) => {
          return (
            <Breadcrumb
              items={[
                {
                  title: (
                    <div
                      style={{
                        display: "flex",
                        alignContent: "center",
                      }}
                    >
                      <NavLink to="/userMsg">用户管理</NavLink>
                      <div
                        className="ant-breadcrumb-separator"
                        aria-hidden="true"
                      >
                        /
                      </div>
                      <div>用户列表</div>
                    </div>
                  ),
                },
              ]}
            ></Breadcrumb>
          );
        },
      }}
    >
      <TableLayout
        ref={tableLayoutRef}
        getTableData={getTableData}
        headerTitle="用户管理"
        toolBarRender={() => (
          <>
            <Button
              className="base-button"
              type="primary"
              onClick={() => itemOptionRef?.current?.handleModalShow()}
            >
              新增用户
            </Button>
          </>
        )}
        columns={columns}
        rowKey={"userId"}
        pagination={{
            total: paginationTotal,
        }}
      />
      {/* 确认弹层 */}
      <ModalConfirm
        ref={modalConfirmRef}
        successCallback={modalSuccessCallback}
      />
      {/* 添加编辑弹层 */}
      <ItemOption ref={itemOptionRef} refreshList={refreshList} />
    </PageContainer>
  );
}

export default DeviceList;